// 导入React的useState钩子，用于管理组件状态
import { useState } from 'react';
// 导入React Router的useNavigate钩子，用于页面导航
import { useNavigate } from 'react-router-dom';
// 导入Lucide React图标库中的ChevronLeft图标组件
import { ChevronLeft } from 'lucide-react';
// 导入自定义的API请求工具
import request from '../api/request';
// 导入Redux store的自定义hook，用于获取dispatch函数
import { useAppDispatch } from '../store/hooks';
// 导入Redux userSlice中的login action
import { login } from '../store/userSlice';

/**
 * 登录页面组件 - 用户身份验证入口
 * 
 * 功能特性：
 * - 手机号验证码登录
 * - 验证码发送和倒计时
 * - 表单验证和错误提示
 * - Redux状态管理集成
 * - 登录成功后自动跳转
 * 
 * 主要状态：
 * - phone: 用户输入的手机号
 * - verificationCode: 用户输入的验证码
 * - isLoading: 登录加载状态
 * - errorMessage: 错误信息
 * - countdown: 验证码发送倒计时
 * 
 * 验证规则：
 * - 手机号格式：中国大陆手机号格式（1[3-9]xxxxxxxxx）
 * - 验证码：6位数字验证码
 * 
 * API接口：
 * - POST /login - 发送验证码
 * - POST /login/verify - 验证登录
 * 
 * @returns {JSX.Element} 登录页面组件
 */
export default function LoginPage() {
  // 获取导航函数，用于页面跳转
  const navigate = useNavigate();
  // 获取Redux dispatch函数，用于发送action
  const dispatch = useAppDispatch();
  
  // 定义手机号状态变量
  const [phone, setPhone] = useState('');
  // 定义验证码状态变量
  const [verificationCode, setVerificationCode] = useState('');
  // 定义加载状态变量
  const [isLoading, setIsLoading] = useState(false); 
  const [errorMessage, setErrorMessage] = useState('');
  // 定义倒计时状态变量
  const [countdown, setCountdown] = useState(0);

  // 处理返回按钮点击事件
  const handleBackClick = () => {
    // 返回上一页
    navigate(-1);
  };

  // 处理发送验证码事件
  const handleSendCode = async () => {
    // 检查手机号是否为空
    if (!phone) {
      // 设置错误信息
      setErrorMessage('请输入手机号');
      return;
    }

    // 验证手机号格式是否正确（中国大陆手机号格式）
    if (!/^1[3-9]\d{9}$/.test(phone)) {
      // 设置错误信息
      setErrorMessage('请输入正确的手机号');
      return;
    }

    // 设置加载状态为true
    setIsLoading(true);
    // 清空错误信息
    setErrorMessage('');

    try {
      // 调用真实API - 发送验证码
      await request.post('/login', {
        phone: phone
      });
      
      // 显示成功提示
      alert('验证码已发送到您的手机');
      
      // 开始倒计时，设置60秒
      setCountdown(60);
      // 创建定时器，每秒递减倒计时
      const timer = setInterval(() => {
        setCountdown((prev) => {
          // 当倒计时小于等于1时，清除定时器并重置为0
          if (prev <= 1) {
            clearInterval(timer);
            return 0;
          }
          // 否则递减1
          return prev - 1;
        });
      }, 1000);
      
    } catch (error) {
      // 发送失败时显示错误提示
      alert('发送验证码失败，请稍后重试');
    } finally {
      // 无论成功失败，都要关闭加载状态
      setIsLoading(false);
    }
  };

  // 处理验证码验证事件
  const handleVerifyCode = async () => {
    // 检查手机号是否为空
    if (!phone) {
      // 设置错误信息
      setErrorMessage('请输入手机号');
      return;
    }

    // 检查验证码是否为空
    if (!verificationCode) {
      // 设置错误信息
      setErrorMessage('请输入验证码');
      return;
    }

    // 验证验证码格式（4位数字）
    if (!/^\d{4}$/.test(verificationCode)) {
      // 设置错误信息
      setErrorMessage('验证码格式错误');
      return;
    }

    // 设置加载状态为true
    setIsLoading(true);
    // 清空错误信息
    setErrorMessage('');

    try {
      // 调用真实API - 判断验证码是否正确
      await request.get('/login', {
        params: { 
          phone, 
          code: verificationCode 
        }
      });
      
      // 验证成功，保存用户信息到Redux store
      const userInfo = {
        phone: phone,
        avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${phone}`, // 根据手机号生成头像
        isLoggedIn: true,
        loginTime: new Date().toISOString()
      };
      
      // 使用Redux action保存用户信息
      dispatch(login(userInfo));
      
      // 显示成功提示
      alert('验证码验证成功！');
      // 跳转到订单页面
      navigate('/orders');
      
    } catch (error) {
      // 验证失败时显示错误提示
      alert('验证码验证失败，请稍后重试');
    } finally {
      // 无论成功失败，都要关闭加载状态
      setIsLoading(false);
    }
  };

  // 处理登录按钮点击事件
  const handleLogin = () => {
    // 调用验证码验证函数
    handleVerifyCode();
  };

  // 返回JSX结构
  return (
    // 主容器，设置最小高度和背景色
    <div className="min-h-full bg-white">
      {/* 顶部导航栏 */}
      <div className="px-4 py-6 flex items-center border-b border-gray-100">
        {/* 返回按钮 */}
        <button 
          onClick={handleBackClick}
          className="w-8 h-8 flex items-center justify-center mr-4"
        >
          {/* 返回箭头图标 */}
          <ChevronLeft className="w-6 h-6 text-gray-900" />
        </button>
        {/* 页面标题 */}
        <h1 className="text-xl font-bold text-gray-900">登录</h1>
      </div>

      {/* 登录表单 */}
      <div className="px-6 py-8">
        {/* 手机号输入区域 */}
        <div className="mb-6">
          {/* 手机号标签 */}
          <label className="block text-sm font-medium text-gray-700 mb-2">
            手机号
          </label>
          {/* 手机号输入框容器 */}
          <div className="relative">
            {/* 手机号输入框 */}
            <input
              type="tel"
              value={phone}
              onChange={(e) => {
                // 更新手机号状态
                setPhone(e.target.value);
                // 清空错误信息
                setErrorMessage('');
              }}
              placeholder="请输入手机号"
              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors"
              maxLength={11}
            />
          </div>
        </div>

        {/* 验证码输入区域 */}
        <div className="mb-6">
          {/* 验证码标签 */}
          <label className="block text-sm font-medium text-gray-700 mb-2">
            验证码
          </label>
          {/* 验证码输入框和发送按钮的容器 */}
          <div className="flex space-x-3">
            {/* 验证码输入框 */}
            <input
              type="text"
              value={verificationCode}
              onChange={(e) => {
                // 更新验证码状态
                setVerificationCode(e.target.value);
                // 清空错误信息
                setErrorMessage('');
              }}
              placeholder="请输入验证码"
              className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors"
              maxLength={4}
            />
            {/* 发送验证码按钮 */}
            <button
              type="button"
              onClick={handleSendCode}
              disabled={isLoading || countdown > 0}
              className={`px-4 py-3 rounded-lg font-medium transition-colors ${
                isLoading || countdown > 0
                  ? 'bg-gray-300 text-gray-500 cursor-not-allowed'
                  : 'bg-primary-500 text-white hover:bg-primary-600'
              }`}
            >
              {/* 显示倒计时或发送验证码文本 */}
              {countdown > 0 ? `${countdown}s` : '发送验证码'}
            </button>
          </div>
        </div>

        {/* 错误信息显示区域 */}
        {errorMessage && (
          <div className="mb-6 p-3 bg-red-50 border border-red-200 rounded-lg">
            {/* 错误信息文本 */}
            <p className="text-red-600 text-sm">{errorMessage}</p>
          </div>
        )}

        {/* 登录按钮 */}
        <button
          onClick={handleLogin}
          disabled={isLoading}
          className={`w-full py-3 rounded-lg font-medium transition-colors ${
            isLoading
              ? 'bg-gray-300 text-gray-500 cursor-not-allowed'
              : 'bg-primary-500 text-white hover:bg-primary-600'
          }`}
        >
          {/* 显示加载状态或登录文本 */}
          {isLoading ? '登录中...' : '登录'}
        </button>

        {/* 用户协议区域 */}
        <div className="mt-6 text-center">
          {/* 协议文本 */}
          <p className="text-xs text-gray-500">
            登录即表示同意
            {/* 用户协议链接 */}
            <a href="#" className="text-primary-500 hover:text-primary-600">
              《用户协议》
            </a>
            和
            {/* 隐私政策链接 */}
            <a href="#" className="text-primary-500 hover:text-primary-600">
              《隐私政策》
            </a>
          </p>
        </div>
      </div>
    </div>
  );
} 